<template>
	<view>
		<view class="tops">
			<image :src="richang" mode="aspectFit" class="richang"></image>
			<view class="got" @click="goUrls">
				<image src="../../static/img/got.png" mode="aspectFit" class="gotImg"></image>
			</view>
		</view>
		<view class="con">
			<view class="kongss"></view>
			<text class="textCon">所有测试</text>
		</view>

		<view class="itmes">
			<!-- <view class="itmes" > -->
			<block v-for="(item,index) in list" :key="index">
				<view class="item dis dis3 dis2" @click="goAppraisal(item.id,item.desciption,item.title,item.isbuy,item.isfree,item.price)">
					<view class="itemLeft">
						<view class="text1">{{item.title}}</view>
						<view class="text2">{{item.tip}}</view>
						<view class="text3 dis dis2">
							<view class="text3_1_1 contenr" v-if="item.isfree==1 && item.isbuy !=1">免费</view>
							<view class="text3_1_2 dis dis2" v-if="item.isbuy==0 && item.isfree==0">
								<image src="../../static/img/rmb.png" mode="aspectFit" class="rmb"></image>
								<text class="rmbText">{{item.price}}</text>
								<text class="rmbText2">￥{{item.showprice}}</text>
							</view>
							<view class="text3_1_3 contenr" v-if="item.isbuy==1">已购买</view>
						</view>
					</view>
					<view class="itemRigth contenr">
						<image :src="item.pic" mode="aspectFit" class="cep"></image>
						<image src="../../static/img/jiex.png" mode="aspectFit" class="cep ceps" v-if="item.isbuy==0 && item.isfree==0"></image>
					</view>
				</view>
				<!-- <view class="lin" v-if="index <list.length-1"></view> -->

			</block>
		</view>
		<view class="appraisalBg" v-if="isLogin">

			<view class="model">
				<view class="kongs"></view>
				<view class="top contenr">微信授权</view>
				<view class="contes dis dis5 dis1 dis2">
					<text class="text1">本功能需要您先授权登录，</text>
					<text class="text1">是否确认登录？</text>
				</view>
				<view class="botns dis dis3">
					<button type="default" class="btns1 contenr" @click="quxiao">取消</button>
					<button type="default" class="share " hover-class='none' open-type="getUserInfo" @getuserinfo="bindGetUserInfo">确定
					</button>
				</view>
			</view>
		</view>
		<view class="appraisalBg" v-if="isIPenx">
			<view class="models">
				<view class="contes_1 dis dis5 dis1 dis2">
					<text class="text1">十分抱歉，由于相关规范，暂时无法在ios小程序中进行测试</text>
					<!-- <text class="text1">是否确认登录？</text> -->
				</view>
				<view class="botns dis dis3">
					<button type="default" class="btns1 contenr" @click="fine">好的</button>
				</view>
			</view>
		</view>
		<view class="kong">

		</view>
		<view>
			<tar-bar :indexTo="1"></tar-bar>
		</view>
	</view>
</template>

<script>
	import pty from '@/common/js/pay.js';
	import config from '@/common/js/config.js';
	let app = getApp().globalData;
	import tarBar from '@/components/tarbar.vue';
	export default {
		components: {
			'tarBar': tarBar
		},
		data() {
			return {
				list: [],
				isLogin: false,
				isIPenx:false,
				code:null,
				richang:`${config.imgUrl}richang.png`
			}
		},
		methods: {
			goUrls() {
				if (!uni.getStorageSync('token')) {
					this.isLogin = true;
					console.log('没有登录');
					return
				}
				uni.navigateTo({
					url: '../../second/me/everyday/everyday'
				})
			},
			goAppraisal(id, texts, title, isbuy, isfree, price) {
				if (!uni.getStorageSync('token')) {
					this.isLogin = true;
					console.log('没有登录');
					return
				}
				if(app.system && isfree==0){
					this.isIPenx=true;//是苹果机
					return
				}
				console.log('是否支付', isbuy == 0 ? `isbuy=${isbuy}未支付` : `isbuy=${isbuy}已支付`)
				console.log('是否免费？', isfree == 0 ? `isfree=${isfree}收费` : `isfree=${isfree}免费`)
				console.log('价格=', price)
				app.desciption = texts;
				app.title = title;
				uni.navigateTo({
					url: `../../second/yang/evaluation/evaluation?id=${id}&isbuy=${isbuy}&isfree=${isfree}&price=${price}`
				})
			},
			fine(){
				this.isIPenx=false
			},
			// 获取数据
			getData() {
				let _this = this;
				this.$http._post('test/index.do').then(res => {
					if (res.data.issuccess == 0) {
						_this.$http.isMssage(res.data.msg);
						return
					}
					let {
						data
					} = res.data;
					_this.list = data;
					console.log(res)
				})
			},
			// 获取用户信息
			bindGetUserInfo(e) {
				let that = this;
				pty.register(e).then(res => {
					console.log('测试页面数据', res)
					if (!res.isLogin) {
						that.isLogin = false
						return;
					}
					app.user = res.data;
					that.getData()
					that.isLogin = false;
				})

			},
			quxiao() {
				let that =this;
				uni.showModal({
					title: '警告',
					content: '您点击了拒绝授权，将无法正常使用小程序，请授权之后再进入!!!',
					showCancel: true,
					concelText: '取消',
					confirmText: '返回授权',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击了“返回授权”')
						} else if (res.cancel) {
							that.isLogin = false
							console.log('用户点击取消');
						}
					}
				})
			},
			loginUser() {
				let that = this;
				this.$http._login().then(res => {
					console.log(res)
					let {
						data
					} = res.data
					app.user = data;
					that.isLogin = false
					uni.setStorageSync('uid', data.userid);
					uni.setStorageSync('token', data.token);
					that.getData();
				})
			}

		},
		onLoad() {
			let that=this
			// if (uni.getStorageSync('token')) {
			// 	this.loginUser();
			// 	return
			// }
			// this.getData();

		},
		onShow() {
			this.getData();
			// if (uni.getStorageSync('token') && this.list.length > 0) {
			// 	console.log('onShow')
			// 	this.loginUser();
			// 	return
			// }
		},
		onShareAppMessage: function(e) {
			let title = `Young养`
			// let uid = uni.getStorageSync('uid');
			// let reportid = app.reportid;
			return {
				title: title,
				path: `/pages/index/index`
			}
		},
		onShareTimeline: function() {
			let title = `拯救罪恶感，一起朋克养生！`;
			// let uid = uni.getStorageSync('uid');
			// let reportid = app.reportid;
			return {
				title: title,
				path: '/pages/index/index'
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/flex.css";
	@import "../../common/css/index.scss";

	.tops {
		width: 100%;
		height: 274upx;
		position: relative;

		.richang {
			width: 100%;
			height: 274upx;
		}

		.got {
			width: 306upx;
			height: 128upx;
			position: absolute;
			bottom: -70upx;
			left: 222upx;

			.gotImg {
				width: 306upx;
				height: 128upx;
			}

		}
	}

	.con {
		width: 100%;
		height: 112upx;
		margin: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);

		.kongss {
			width: 100%;
			height: 55upx;
		}

		.textCon {
			font-size: 28upx;
			font-family: $typeface;
			font-weight: 400;
			color: #999999;
			margin-left: 32upx;
		}
	}

	// button::after {
	// 	border: none;
	// 	text-align: none;
	// }

	.itmes {
		width: 686upx;
		min-height: 200upx;
		// background: #FFFFFF;
		border-radius: 24upx;
		margin: auto;

		.item {
			width: 686upx;
			height: 208upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: auto;
			margin-bottom: 24upx;
			// border-bottom: 1px solid #EAEAEA;

			.itemLeft {
				width: 419upx;
				height: 148upx;
				margin-left: 32upx;

				.text1 {
					height: 45upx;
					font-size: 32upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
					margin-top: 0upx;
				}

				.text2 {
					height: 33upx;
					font-size: 26upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #999999;
					margin-top: 4upx;
				}

				.text3 {
					height: 98upx;

					// border: 1px solid red;
					.text3_1_1 {
						width: 80upx;
						height: 34upx;
						border-radius: 8upx;
						border: 1px solid #44AEFF;
						font-size: 22upx;
						font-family: $typeface;
						font-weight: 500;
						color: #44AEFF;
					}

					.text3_1_2 {
						height: 100%;

						.rmb {
							width: 19upx;
							height: 23upx;
							margin-top: 20upx;
						}

						.rmbText {
							font-size: 52upx;
							font-family: $typeface;
							font-weight: 500;
							color: #E85335;
						}

						.rmbText2 {
							font-size: 24upx;
							font-family: $typeface1;
							font-weight: 400;
							color: #999999;
							text-decoration: line-through;
							margin-left: 16upx;
							margin-top: 20upx;

						}
					}

					.text3_1_3 {
						width: 88upx;
						height: 34upx;
						background: #FFE4E4;
						border-radius: 8upx;
						font-size: 22upx;
						font-family: $typeface;
						font-weight: 500;
						color: #E85335;
					}
				}
			}

			.itemRigth {
				width: 148upx;
				height: 148upx;
				margin-right: 30upx;
				position: relative;

				.cep {
					width: 148upx;
					height: 148upx;
				}

				.ceps {
					position: absolute;
				}
			}
		}

		.lin {
			width: 622upx;
			height: 1px;
			background-color: #EAEAEA;
			margin: auto;
			// margin-bottom: 24upx;
		}


	}

	.appraisalBg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		bottom: 0;

		button {
			position: relative;
			display: block;
			margin-left: 0;
			margin-right: 0;
			padding-left: 0;
			padding-right: 0;
			box-sizing: border-box;
			font-size: 18px;
			text-align: center;
			text-decoration: none;
			line-height: 2.55555556;
			border-radius: 0;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			color: #000000;
			background-color: #fff;
			// width: 622upx;
			// min-height: 188upx;
			border: none;
		}

		.model {
			width: 640upx;
			height: 402upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: auto;
			margin-top: 310upx;

			.kongs {
				width: 100%;
				height: 1px;
			}

			.top {
				width: 544upx;
				height: 50upx;
				font-size: 36upx;
				font-family: $typeface;
				font-weight: 500;
				color: #000000;
				line-height: 50px;
				margin: auto;
				margin-top: 57upx;
			}

			.contes {
				width: 544upx;
				height: 95upx;
				font-size: 32upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				line-height: 48upx;
				margin: auto;
				margin-top: 33upx;
			}

			.botns {
				width: 544upx;
				height: 80upx;
				margin: auto;
				margin-top: 39upx;

				.btns1 {
					width: 240upx;
					height: 80upx;
					background: #EDEDED;
					border-radius: 40upx;
					font-size: 30upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}

				.share {
					width: 240upx;
					height: 80upx;
					background: #FFD344;
					border-radius: 40upx;
					font-size: 30upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.models{
			width: 580upx;
			height: 300upx;
			border-radius: 24upx;
			margin: auto;
			margin-top: 310upx;
			background-color: #fff;
			.contes_1{
				width: 85%;
				height: 200upx;
				margin: auto;
			}
			.botns{
				width: 85%;
				height: 80upx;
				margin: auto;
				border-radius: 24upx;
				.btns1{
					width: 100%;
					height: 100%;
					background-color: #FFD344;
					color: #333;
					font-size: 30upx;
					font-weight: 500;
					font-family: $typeface;
					border-radius: 24upx;
				}
			}
		}
	}

	.kong {
		width: 100%;
		height: 200upx;
	}
</style>
